<template>
    <div class="Sidebar">
        <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item v-for="(item) in list" :key="item.label" :title="item.label" />

        </van-sidebar>
        <div class="right">
            <div class="imgHeader">
                <van-row gutter="10">
                    <van-col v-for="(item) in listRight.children" :key="item.id" span="12">
                        <div style="height: 1rem;">
                            <img width="100%" :src="item.img" alt="">
                        </div>
                    </van-col>
                </van-row>
            </div>
            <Product :list="listRight.product"></Product>
            <!-- <ProductList :list="listRight.product"></ProductList> -->
        </div>
    </div>
</template>

<script>
import Product from "./Product.vue";
export default {
    components: { Product },
    props: {
        list: [Array, Object],
    },
    computed: {
        listRight() {
            return this.list[this.activeKey];
        },
    },
    data() {
        return {
            activeKey: 0,
        };
    },

    methods: {
        onChange(index) {
            console.log(index);
        },
    },
};
</script>

<style lang="scss" scoped>
.Sidebar {
    .van-sidebar {
        position: fixed;
        top: 0.4rem;
        height: 100vh;
        width: 20vw;
        background-color: #f7f8fa;
        ::v-deep .van-sidebar-item__text {
            font-size: 0.2rem;
        }
    }
    .right {
        padding-top: 0.5rem;
        padding-left: 20vw;
        // .imgHeader {
        //     display: flex;

        // }
        img {
            height: 1rem;
        }
        .van-row {
            padding-bottom: 0.2rem;
        }
        .van-col {
            padding-top: 0.06rem;
        }
    }
}

</style>